<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn ref='aaa'></cpn>
        <button @click='btnClick'>点击</button>
    </div>

    <template id="cpn">
        <h2>我是子组件</h2>
    </template>
    <script src= '../js/vue.js'></script>
    <script>
        const cpn = {
            template:'#cpn',
            data() {
                return {
                    name:'重庆对外经贸学院'
                }
            },
            methods:{
                showMessage() {
                    console.log('showMessage');
                }
            }
        }
        const app = new Vue({
            el:'#app',
            data:{

            },
            components:{
                cpn
            },
            methods:{
                btnClick() {
                    //1.$children (极少使用，几乎不用) 用于相同的多个组件
                    /* console.log(this.$children);
                    this.$children[0].showMessage();
                    for(let c of this.$children) {
                        console.log(c.name);
                    } */

                    //2.$refs {} 对象类型，默认是一个空对象，必须指定ref组件
                    this.$refs.aaa.showMessage();
                    console.log(this.$refs.aaa.name);
                }
            }
        })
    </script>
</body>
</html>